<template>
  <el-dialog title="选择合同" :close-on-click-modal="false" :visible.sync="visible" class="jsbos-dialog jsbos-dialog_center"
    lock-scroll append-to-body width="1200px" v-dialogDrag>
    <div class="CustomerPoolBox">
      <el-row>
        <el-col :span="24">
          <div class="">
            <el-row class="" :gutter="24">
              <el-form @submit.native.prevent label-width="80px" label-position="right">
                <el-col :span="8">
                  <el-form-item label="合同编号">
                    <el-input v-model="query.procureCode" placeholder="请输入合同编号" clearable @input="searchByName"
                      style="width: 100%">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="合同名称">
                    <el-input v-model="query.procureName" placeholder="请输入合同名称" clearable @input="searchByName"
                      style="width: 100%">
                    </el-input>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="8">
                  <el-form-item label="客户名称">
                    <el-input v-model="query.customerName" placeholder="请输入客户名称" clearable @input="searchByName"
                      style="width: 100%">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="合同类型">
                    <el-select v-model="query.contractType" placeholder="请选择合同类型" ref="contractTypeSelect"
                      @keydown.enter.native="disableVisible" @change="search()" clearable>
                      <el-option v-for="(item, index) in contractTypeOptions" :key="index" :label="item.fullName"
                        :value="item.id" :disabled="item.disabled"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col> -->
                <el-col :span="6">
                  <div style="display: flex;align-items: center;margin-left: 12px;">
                    <el-button type="primary" icon="el-icon-search" @click="search()" size="mini">查询
                    </el-button>
                    <el-button icon="el-icon-refresh-right" size="mini" @click="reset()">重置
                    </el-button>
                  </div>
                </el-col>
              </el-form>
            </el-row>
            <div class="Tabbox">
              <el-table ref="multipleTable" v-loading="listLoading" :data="list" @sort-change="sortChange"
                @selection-change="handleSelectionChange" @row-click="setCustomer">
                <el-table-column label="序号" type="index" width="50">
                </el-table-column>
                <el-table-column prop="procureCode" label="合同编号" width="150" align="left" />
                <el-table-column prop="procureName" label="合同名称" width="260" align="left" />
                <el-table-column prop="supplierName" label="供应商名称" width="auto" align="left" />
                <el-table-column prop="procureAmount" label="采购合同金额(元)" width="150" align="right">
                  <template slot-scope="scope">
                    {{ jsbos.toThousands(scope.row.procureAmount) }}
                  </template>
                </el-table-column>
                <el-table-column prop="warranty" label="质保期(月)" width="180" align="center" />
               
              </el-table>

              <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
                @pagination="initData" />
            </div>
          </div>
        </el-col></el-row>
      <FlowBox v-if="flowVisible" ref="FlowBox" @close="colseFlow" />
    </div>
  </el-dialog>
</template>

<script>
import request from "@/utils/request";
import { getDictionaryDataSelector } from "@/api/systemData/dictionaryPlat";
import FlowBox from "@/views/workFlow/components/FlowBox";
import { isEmpty } from "@/utils/isEmpty";

export default {
  components: { FlowBox },
  props: {
    value: {
      default: () => [],
    },
    level: {
      type: Number,
      default: 3,
    },
    source:{
      type:String,
      default:''
    },
    size: String,
  },
  data() {
    return {
      visible: false,
      agentIdList: [],
      dataForm: { },
      multipleSelection: [],
      query: {
        procureName: undefined,
        procureCode: undefined,
        // contractType: undefined,
        // customerName:undefined
      },
      list: [],
      listLoading: false,
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      },
      flowVisible: false,
      typeOptions: [],
      typeProps: { label: "fullName", value: "id" },
      contractTypeOptions: [],
    };
  },
  computed: {
    menuId() {
      return this.$route.meta.modelId || "";
    },
  },
  created() {
    this.getcontractTypeOptions();
  },
  methods: {
    getcontractTypeOptions() {
      getDictionaryDataSelector("contractType").then((res) => {
        this.contractTypeOptions = res.data.list;
      });
    },
    disableVisible() {
      this.$refs.contractTypeSelect.visible = false;
    },
    setCustomer(row, column, event) {
      // console.log("ddddddddddddddd", row);
      this.visible = false;
      this.$emit("refreshDataList", row);
    },
    init(type) {
      this.visible = true;
        this.initData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    sortChange({ column, prop, order }) {
      this.listQuery.sort = order == "ascending" ? "asc" : "desc";
      this.listQuery.sidx = !order ? "" : prop;
      this.initData();
    },
    initData() {
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        ...this.query,
        source:this.source || '',
        menuId:this.menuId
      };
      request({
        url: `/api/contract/RkContractProcure/getList`,
        method: "post",
        data: _query,
      }).then((res) => {
        this.list = res.data.list;

        this.total = res.data.pagination.total;
        this.listLoading = false;
      });
    },
    searchByName() {
      console.log("name..", this.query.name);
      if (!this.query.name || this.query.name.length > 1) this.search();
    },
    search() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      };
      this.initData();
    },
    colseFlow(isrRefresh) {
      this.flowVisible = false;
      if (isrRefresh) this.reset();
    },
    reset() {
      // this.$refs.treeBox.setCheckedKeys([], false);
      for (let key in this.query) {
        this.query[key] = undefined;
      }
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      };
      this.initData();
    },
  },
};
</script>

<style scoped lang="scss">
.CustomerPoolBox {
  .Tabbox {
    position: relative;

    >>>.el-table__body-wrapper {
      height: 323px;
      overflow: auto;
      padding-bottom: 40px;
    }

    >>>.el-pagination {
      position: absolute;
      bottom: 0;
      right: 0;
      background-color: white;
      width: 100%;
    }
  }
}


.jsbos-dialog>>>.el-dialog__body {
  min-height: 500px;
  max-height: 500px;
}
</style>
